<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	function back() {
		uni.navigateBack({ delta: 1 })
	}

	const hopeList = ref([])
	const currentPage = ref(1)
	const scType = ref(1)
	async function getHopeList() {
		const res = await http.request({
			url: '/api/user/mySc',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				sc_type:scType.value
			},
		})
		console.log(res)
		hopeList.value = [...hopeList.value, ...res.data]
	}

	function chooseType(e){
		scType.value = e;
		hopeList.value = [];
		currentPage.value = 1;
		getHopeList();
	}

	// 取消心愿单
	async function cancelHope(item) {
		const res = await http.request({
			url: '/api/goods/scPost',
			method: 'POST',
			data: {
				id: item.object_id,
				type: item.type,
				box_id: item.box_id,
			},
		})
		console.log(res)
		if (res.st == 1) {
			hopeList.value=[]
			uni.utils.toast('取消成功')
			currentPage.value = 1
			getHopeList()
		} else {
			uni.utils.toast('取消失败')
		}
	}

	function refresh() {
		++currentPage.value
		getHopeList()
	}

	function goBlindBox(item) {
		if (item.box_type == 1) {
			uni.navigateTo({
				url: `/pages/chosen/tianxuan-detail?id=${item.object_id}`,
			})
		} else if (item.box_type == 3) {
			uni.navigateTo({
				url: `/pages/bag/lucky-box-center?id=${item.object_id}`,
			})
		}
	}

	function goGoods(item) {
		uni.navigateTo({
			url: `/homePage/goodsinfo/index?id=${item.object_id}`,
		})
	}
	//跳转天选
	function goTX(id) {}
	//跳转无限
	function goWX(id) {}

	onShow(() => {
		currentPage.value = 1
		hopeList.value = []
		getHopeList()
	})
</script>

<template>
	<view class="hope-content">
		<!-- <view class="nav-bar">
			<uni-nav-bar left-icon="left" title="心愿单" @clickLeft="back" />
		</view> -->
		
		<view class="hope-lable">
			<view @click="chooseType(1)" class="" :style="scType == 1 ? 'color:#7948EA;font-size: 34rpx; font-weight: 600;':''">商城</view>
			<view @click="chooseType(2)" class="" :style="scType == 2 ? 'color:#7948EA;font-size: 34rpx; font-weight: 600;':''">天选</view>
			<view @click="chooseType(3)" class="" :style="scType == 3 ? 'color:#7948EA;font-size: 34rpx; font-weight: 600;':''">福袋</view>
			<!-- <view class="">拆卡</view> -->
		</view>
		
		
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			style="height: 89vh"
			@scrolltolower="refresh"
		>
			<view class="hope-list">
				<view
					class="hope-list-item"
					v-for="(item, index) in hopeList"
					:key="item.id"
				>
					<view class="item-left">
						<image
							v-if="item.type == 2"
							style="width: 204rpx; height: 204rpx"
							:src="item.box_img"
							mode=""
						></image>
						<image
							v-if="item.type == 1"
							style="width: 204rpx; height: 204rpx"
							:src="item.goods_img"
							mode=""
						></image>
					</view>
					<view class="item-right">
						<view class="item-title" v-if="item.type == 2">
							{{ item.box_name }}
						</view>
						<view class="item-title" v-if="item.type == 1">
							{{ item.goods_name }}
						</view>
						<view class="item-bottom">
							<view v-if="item.status == 0" class="delete-left">
								已下架
							</view>
							<view
								v-if="item.type == 2 && item.status != 0"
								class="delete-left"
								style="background-color: #b25aff; color: #fff"
								@click="goBlindBox(item)"
							>
								去盲盒
							</view>
							<view
								v-if="item.type == 1 && item.status != 0"
								class="delete-left"
								style="background-color: #f45454; color: #fff"
								@click="goGoods(item)"
							>
								去商城
							</view>
							<view class="delete" @click="cancelHope(item)">
								X
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	page{
		background-color: #E9EAF2;
	}
	.hope-content {
		height: 100vh;
		// background: linear-gradient(178deg, #fff -47%, #fff 23%);
		.nav-bar {
			padding-top: 76rpx;
			::v-deep .uni-navbar__header {
				background-color: transparent !important;
			}
			::v-deep .uni-navbar__content {
				background-color: transparent !important;
			}
			::v-deep .uni-navbar--border {
				border: none !important;
			}
		}
		.hope-lable{
			background-color: #fff;
			width: 100%;
			height: 60rpx;
			display: flex;
			font-size: 28rpx;
			color: #808080;
			justify-content: space-evenly;
			padding: 43rpx 10rpx 30rpx 12rpx;
			align-items: center;
			
		}
		.hope-list {
			padding: 22rpx;
		}
		.hope-list-item {
			display: flex;
			align-items: center;
			width: 706rpx;
			height: 234rpx;
			padding: 14rpx;
			margin-bottom: 28rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			.item-left {
				width: 204rpx;
				height: 204rpx;
				margin-right: 26rpx;
				box-sizing: border-box;
				border-radius: 4rpx;
				overflow: hidden;
				flex-shrink: 0;
			}
			.item-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				height: 100%;
				.item-title {
					width: 100%;
					font-size: 24rpx;
				}
				.item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					.delete-left {
						width: 134rpx;
						height: 40rpx;
						border-radius: 8rpx;
						background-color: #d8d8d8;
						text-align: center;
						line-height: 40rpx;
						font-size: 20rpx;
					}
					.delete {
						width: 38rpx;
						height: 38rpx;
						font-size: 20rpx;
						line-height: 38rpx;
						text-align: center;
						color: #b1b0b8;
					}
				}
			}
		}
	}
</style>
